<template>
  <lay-layer
    title="编辑菜单"
    v-model="visible"
    :shade="true"
    :shadeClose="false"
    :shadeOpacity="0.3"
    :maxmin="true"
    :area="['450px']"
    :teleportDisabled="false"
    :btn="actionBtn"
  >
    <Loading :loading="isLoading">
      <lay-form :model="formState" ref="formRef" size="xs" style="width: 88%">
        <lay-form-item label="菜单名称" prop="name" required>
          <lay-input
            type="text"
            v-model="formState.name"
            placeholder="菜单名称"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item label="菜单icon名称" prop="icon">
          <lay-input
            type="text"
            v-model="formState.icon"
            placeholder="例如：menu"
            allow-clear
          />
          <p style="font-size: 10px; color: #999">
            在前端路径：根目录/src/assets/svgIcon下的svg文件名称，不要加.svg
          </p>
        </lay-form-item>

        <lay-form-item label="上级菜单" prop="pid" required>
          <lay-tree-select
            v-model="formState.pid"
            :data="menuList"
            placeholder="请选择"
            :search="true"
            style="width: 100%"
            :default-expand-all="true"
          >
            <template #title="{ data }">
              {{ data.name }}
            </template>
          </lay-tree-select>
        </lay-form-item>

        <lay-form-item label="访问地址" prop="path" required>
          <lay-input
            type="text"
            v-model="formState.path"
            placeholder="访问地址"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item label="页面文件路径" prop="file_path">
          <lay-input v-model="formState.file_path" placeholder="页面文件路径" allow-clear>
            <template #prepend>/src/views</template>
            <template #append>.vue</template>
          </lay-input>
          <div
            style="
              font-size: 12px;
              color: #999;
              max-width: 260px;
              white-space: normal;
              overflow-wrap: break-word;
            "
            v-show="formState.file_path"
          >
            /src/views{{ formState.file_path }}.vue
          </div>
        </lay-form-item>

        <lay-form-item label="是否隐藏" prop="hidden" required>
          <lay-radio-group name="hidden" v-model="formState.hidden">
            <lay-radio :value="0">显示</lay-radio>
            <lay-radio :value="1">隐藏</lay-radio>
          </lay-radio-group>
        </lay-form-item>

        <lay-form-item label="页面是否缓存" prop="keepAlive" required>
          <lay-radio-group name="keepAlive" v-model="formState.keepAlive">
            <lay-radio :value="0">不缓存</lay-radio>
            <lay-radio :value="1">缓存</lay-radio>
          </lay-radio-group>
        </lay-form-item>

        <lay-form-item label="排序" prop="sort" required>
          <lay-input-number v-model="formState.sort" placeholder="排序值" allow-clear />
        </lay-form-item>
      </lay-form>
    </Loading>
  </lay-layer>
</template>
<script setup>
import { ref, nextTick } from "vue";
import { msgSuccess, msgError } from "@/utils/message";
import {
  one_assign,
  // deepCopy,
  addDisabledToNode,
} from "@/utils/tool";
import * as Api from "@/api/menu/index";
// 定义抛出的事件名称
const emit = defineEmits(["callback"]);
// 定义动态数据
const isLoading = ref(false);
const formRef = ref(undefined);

// 定义表单信息，deepCopy解决指针问题
const formState = ref({
  name: "",
  icon: "",
  pid: 0,
  child_menu_id: 0,
  path: "",
  file_path: "",
  hidden: 0,
  keepAlive: 0,
  sort: 100,
});
const visible = ref(false);
const actionBtn = ref([
  {
    text: "提交",
    callback: () => {
      handleSubmit();
    },
  },
  {
    text: "取消",
    callback: () => {
      visible.value = false;
    },
  },
]);

// 权限列表
const menuList = ref([]);
// 当前信息
const detail = ref(undefined);

// 控制显示
const show = (menu_list, data) => {
  visible.value = true;
  detail.value = data;

  const new_menuList = [
    {
      id: 0,
      pid: 0,
      name: "顶级菜单",
      title: "顶级菜单",
    },
    ...menu_list,
  ];
  menuList.value = addDisabledToNode(new_menuList, detail.value["id"]);

  //初始化表单信息
  nextTick(() => {
    formState.value = one_assign(formState.value, detail.value, true);
  });
};

// 提交
const handleSubmit = () => {
  if (formState.value.name == "" || formState.value.name == null) {
    return msgError("菜单名称不能为空");
  }
  if (formState.value.pid === "" || formState.value.pid === null) {
    return msgError("请选择菜单上级");
  }
  if (formState.value.path === "" || formState.value.path === null) {
    return msgError("菜单路径不能为空");
  }
  // if (formState.value.file_path === "" || formState.value.file_path === null) {
  //   return msgError("页面文件路径不能为空");
  // }
  if (formState.value.hidden === null) {
    return msgError("请选择隐藏状态");
  }
  if (formState.value.keepAlive === null) {
    return msgError("请选择页面缓存状态");
  }
  if (formState.value.sort == "") {
    return msgError("排序值必填");
  }

  formState.value.child_menu_id = formState.value.pid;

  isLoading.value = true;
  Api.edit({ menuId: detail.value.menu_id, form: formState.value })
    .then((result) => {
      if (result.status == 200) {
        msgSuccess(result.message);
        visible.value = false;
      } else {
        msgError(result.message);
      }
    })
    .finally(() => {
      emit("callback", "");
      isLoading.value = false;
    });
};

// 导出方法/属性给父组件
defineExpose({ show });
</script>
